<!--
 * @Description: 
 * @Date: 2023-04-21 10:32:42
 * @LastEditors: czp
 * @LastEditTime: 2023-04-23 17:49:54
-->
<template>
	<div style="font-size: 14px">
		<el-dropdown class="dropdown" trigger="click" @command="handleMenu">
			<span class="el-dropdown-link">
				<IEpFold />
			</span>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item :command="{ children: [{ path: HOME_PATH }] }"> 首页</el-dropdown-item>
					<el-dropdown-item v-for="(item, index) in menuList" :key="index" :command="item">{{ item.name }}</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>
<script setup lang="ts" name="Menu">
import { HOME_PATH } from "@/enums/routerEnum";
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { INav } from "@/store/interface/base";
// 获取透传属性
const attrs = useAttrs();
const { menuList } = useBaseStore();
const { pageJump } = useVR();

/**
 * 点击菜单
 */
const handleMenu = (item: INav) => {
	pageJump(item.children[0].path);
};
</script>
<style lang="scss" scoped>
.dropdown {
	.el-dropdown-link {
		display: flex;
		font-size: 24px;
		font-weight: bold;
		color: v-bind("attrs.color");
		cursor: pointer;
	}
}
</style>
